<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，脱敏，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件涵盖您能使用的大部分场景。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<view class="fu-flex">
				<fu-text text="主色" type="primary"></fu-text>
				<fu-text text="成功" type="success"></fu-text>
				<fu-text text="错误" type="error"></fu-text>
				<fu-text text="警告" type="warning"></fu-text>
				<fu-text text="信息" type="info"></fu-text>
			</view>
		</fu-section>
		
		<fu-section title="拨打电话" customClass="fu-m-t-20" type="line">
			<fu-text text="15000000000" mode="phone" call></fu-text>
			<view class="fu-m-t-20" >
				<fu-text text="15000000000" mode="phone" format="encrypt" call></fu-text>
			</view>
		</fu-section>
		
		<fu-section title="日期格式化" customClass="fu-m-t-20" type="line">
			<fu-text text="1706675070" mode="date" format="Y"></fu-text>
			<view class="fu-m-t-20">
				<fu-text text="1706675070" mode="date" format="Y-M"></fu-text>
			</view>
			<view class="fu-m-t-20">
				<fu-text text="1706675070" mode="date"></fu-text>
			</view>
			<view class="fu-m-t-20">
				<fu-text text="1706675070" mode="date" format="Y-M-D h"></fu-text>
			</view>
			<view class="fu-m-t-20">
				<fu-text text="1706675070" mode="date" format="Y-M-D h:m"></fu-text>
			</view>
			<view class="fu-m-t-20">
				<fu-text text="1706675070" mode="date" format="Y-M-D h:m:s"></fu-text>
			</view>
		</fu-section>
		
		<fu-section title="姓名脱敏" customClass="fu-m-t-20" type="line">
			<fu-text mode="name" text="张小" format="encrypt"></fu-text>
			<view class="fu-m-t-20">
				<fu-text text="张小二" mode="name" format="encrypt"></fu-text>
			</view>
		</fu-section>
		
		<fu-section title="超链接" customClass="fu-m-t-20" type="line">
			<fu-text text="Go to fu docs" mode="link" href="http://www.baidu.com"></fu-text>
		</fu-section>
		
		<fu-section title="显示金额" customClass="fu-m-t-20" type="line">
			<fu-text text="728732.32" mode="price"></fu-text>
		</fu-section>
		
		<fu-section title="前后图标" customClass="fu-m-t-20" type="line">
			<fu-text text="百度一下" prefixIcon="service" iconStyle="font-size: 19px"></fu-text>
			<view class="fu-m-t-20">
				<fu-text text="查看更多" suffixIcon="right" iconStyle="font-size: 18px"></fu-text>
			</view>
		</fu-section>
		
		<fu-section title="超出隐藏" customClass="fu-m-t-20" type="line">
			<fu-text text="'FusionsUi，全端适配'的uni-app专属组件库，深度融合Vue2/Vue3双版本支持，提供企业级开发体验。" :lines="1"></fu-text>
		</fu-section>
		
		<fu-section title="小程序开放能力" customClass="fu-m-t-20" type="line">
			<fu-text text="分享到微信" openType="share" type="success" @click="onClick"></fu-text>
		</fu-section>
	</view>
</template>

<script setup>
	// methods方法
	const onClick = () => {
		// #ifndef MP-WEIXIN
		uni.showToast({
			title: '请在微信小程序内查看效果',
			icon: 'none'
		})
		// #endif
	}
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>